<template>
  <MoveDialog :visible="props.visible" @update:visible="emits('update:visible', false)">
    <div class="chart-body">
      <div class="chart-title"></div>
      <div class="chart-list">
        <UserList />
      </div>
      <div class="chart-content">
        <div style="margin-bottom: 50px">
          <div class="chart-msg" v-for="msg in msglist" :class="{ r: msg.self }">
            <div class="avatar">
              <el-avatar src="/tupian.jpg" />
            </div>
            <div class="r-info">
              <div class="name">{{ msg.name }}</div>
              <div class="bubble">{{ msg.msg }}</div>
            </div>
          </div>
        </div>
        <div ref="chartFoot" style="height: 50px"></div>
      </div>
      <div class="chart-input">
        <el-input
          v-model="textarea"
          :rows="6"
          type="textarea"
          placeholder="输入消息"
          @keydown="keydown"
          @keyup="keyup"
        />
      </div>
    </div>
  </MoveDialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import MoveDialog from '../../../components/MoveDialog.vue';
import UserList from './UserList.vue';
const textarea = ref('');
const emits = defineEmits(['update:visible']);

const chartFoot = ref<HTMLElement>();
const props = defineProps<{ visible: boolean }>();

type ChartMsg = {
  msg: string;
  name?: string;
  self?: boolean;
};

const msglist = ref<ChartMsg[]>([
  { name: '服务员', msg: '您好' },
  { name: '罗永浩', msg: '您好，给我来一个中杯的拿铁。', self: true },
  { name: '服务员', msg: '您要的是这个吗？' },
  { name: '罗永浩', msg: '这个中杯。', self: true },
  { name: '服务员', msg: '对不起，先生，这个是大杯，这个才是中杯。' },
  { name: '罗永浩', msg: '你这儿不是大中小三个杯子吗？我要这个中杯。', self: true },
  { name: '服务员', msg: '对不起先生，这个是大杯，这个才是中杯……中杯、大杯、特大杯。' },
  { name: '罗永浩', msg: '我不管你们怎么叫，我就要这三个杯子里的中杯。', self: true },
  { name: '服务员', msg: '对不起先生，这个是大杯，这个才是中杯。' }
]);
const sendMessage = (msg: string, self: boolean) => {
  msglist.value.push({ msg, self });
  chartFoot.value?.scrollIntoView({
    block: 'end',
    behavior: 'smooth'
  });
};
const autoChart = () => {
  setTimeout(() => {
    sendMessage('对不起先生，这个是大杯，这个才是中杯。', false);
  }, 1000);
};

const keydown = (e: KeyboardEvent) => {
  e.stopPropagation();
  if (e.key === 'Enter') {
    const msg = textarea.value.replace(/\n/g, '');
    if (msg) {
      sendMessage(msg, true);
      autoChart();
    }
    textarea.value = '';
    return false;
  }
};
const keyup = (e: KeyboardEvent) => {
  if (e.key === 'Enter') {
    textarea.value = '';
  }
};
</script>
<style lang="less" scoped>
.chart-body {
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 20px 1fr 160px;
  grid-template-areas: 'list title' 'list content' 'list input';
  .chart-title {
    grid-area: title;
    background: #fff;
  }
  .chart-list {
    grid-area: list;
    border-right: 1px solid #eee;
    padding: 10px 0;
  }
  .chart-content {
    grid-area: content;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
  }
  .chart-input {
    grid-area: input;
    padding: 10px;
  }
}
.chart-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;

  .name {
    margin: 0;
    font-size: 12px;
  }

  .r-info {
    max-width: 70%;
    .bubble {
      padding: 12px;
      color: white;
      font-size: 13px;
      margin-top: 3px;
      position: relative;
      background: #e5e5e5;
      word-wrap: break-word;
      background-color: #007bff;
      border-radius: 0 8px 8px 8px;
      user-select: text;
    }

    .bubble::after {
      top: 0;
      width: 0;
      height: 0;
      left: -3px;
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 0 10px 20px 0;
      border-color: transparent #007bff transparent transparent;
    }
  }

  &.r {
    flex-direction: row-reverse;

    .name {
      display: none;
    }

    .bubble {
      border-radius: 8px 0 8px 8px;
    }

    .bubble::after {
      left: auto;
      right: -3px;
      border-width: 20px 10px 0 0;
      border-color: #007bff transparent transparent transparent;
    }
  }
}
</style>
